import {designComponent, designPage, PropType} from "plain-design-composition";
import {useVisualEditor} from "./useVisualEditor";
import {predefineComponentConfig} from "../public/predefineComponent.config";
import {predefineComponentRender} from "../public/predefineComponent.render";
import {predefineActionRender} from "../public/predefineAction.render";
import {predefineActionConfig} from "../public/predefineAction.config";
import VisualEditor from "../../packages/editor/VisualEditor";
import {iVisualData} from "../../packages/utils/types.base";
import {useRemoveData} from "./useRemoteData";
import {reactivityApi} from "../../packages/utils/vueReactivityApi";

const Editor = designComponent({
    props: {
        data: {type: Object as PropType<iVisualData>, required: true}
    },
    setup({props}) {

        const editor = useVisualEditor({
            /*数据*/
            data: props.data,
        })
        /*预定义的组件渲染*/
        predefineComponentRender(editor.components.render, reactivityApi)
        /*预定义的组件配置*/
        predefineComponentConfig(editor.components.config)
        /*预定义动作渲染*/
        predefineActionRender(editor.action.render)
        /*预定义动作配置*/
        predefineActionConfig(editor.action.config)

        return () => (
            <VisualEditor editor={editor}/>
        )
    },
})

export const App = designPage(() => {

    const data = useRemoveData()

    return () => (
        !!data.value && <Editor data={data.value}/>
    )
})
